import { Component } from 'react';

import { Button,Boxs,Group,Toast,DatetimeField,Datetime,SelectField,TextareaField,TextField,PhotoField,EmployeeField} from 'saltui';
import DB from '../../../app/db';
import AngleRight from 'salt-icon/lib/AngleRight';
import Ques from 'components/ques';
import SelectMember from 'components/selectMember';

// import Upload from 'components/upload';
const {Count} = TextareaField;
const { HBox, Box,VBox } = Boxs;
const nameRegExp = /^[a-zA-Z0-9_.。，,\u4e00-\u9fa5]+$/;
const {
	IconButton,
	ButtonGroup
} = Button;
export default class PageHome extends Component {
    constructor(props) {
		  super(props);
      let dataId = this.props.params.dataId;
      var dateLong = null;
      if(typeof(dataId) == 'undefined'){
        dataId = "";
      }
      
      var nowdate = new Date();
      dateLong = nowdate.getTime();
	    this.state = {
	      id:this.props.params.dataId,


        imgList:[],
        title:'',
        typeList:[],  //问卷类型
        dataId:dataId,
        formData:{todayArrange:'',content:'',logTime:''},
        startDate:null,
        startTime:null,
        endTime:null,
        endDate:null,
        typeSelect:null,
        titleDescription:'',
        answerScopeList:[],
        answerScopeId:'',
        quesScopeList:[],
        quesScopeId:'',
        corpId:corpid,
        todoList:[
          // {'topicSetting':{'willAnswer':'0','optionReNo':'0','ezQuABC':'1','optionArray':'1'},'dataSort':dateLong,'type':'0',quesType:'sinselect','title':'单选题','titleInfo':'单选题','options':[{'optionsContent':'选项','optionSetting':{"optionBlank":"0","optionBlankWill":"0","optionScore":"0","optionImg":[]}}]}
          ],
      };
      dd.biz.navigation.setTitle({
            title: '设计问卷',
            onSuccess: function(result) {
              
            },
            onFail: function() {

            }
        });
    }



    handleClick(path){
	  	location.hash=path;
    }
//输入字符验证
nameFilter(originValue) {
    const matches3 = originValue.match(nameRegExp);
    let name = '';
    if (matches3) {
      name = matches3[0];
    }
    return name;
  }

    onChange(){

    }

    onDelete(){

    }

    formatDate(date){
      var myyear = date.getFullYear();   
      var mymonth = date.getMonth()+1;   
      var myweekday = date.getDate();  
      var hours = date.getHours();
      var minutes = date.getMinutes();
      //alert("formatDate"+myyear+":"+mymonth+":"+myweekday)  
      if(mymonth < 10){   
          mymonth = "0" + mymonth;   
      }   
      if(myweekday < 10){   
          myweekday = "0" + myweekday;   
      }

      if(hours < 10){   
        hours = "0" + hours;   
      }

      if(minutes < 10){   
        minutes = "0" + minutes;   
       }

      return (myyear+"-"+mymonth + "-" + myweekday+" "+hours+":"+minutes+":00");   
    }

validateText(text, msg){
   return true;
  }

  componentDidMount(){
      let t = this;
    DB.QuesModuleAPI.getQuestTopic({
      quesId : t.state.id
    }).then((content)=>{
      if(content.type == 'success'){
        let data = content.data;
        if(data.isMobile == 0 ){
          Toast.show({
            type: 'error',
            content: '请前往电脑端修改该问卷！',
            onHide: function () {}
          });
          backPage();
          return ;
        }
        let todoList = [];
        if(content.data.topicJson == null || content.data.topicJson == '' || content.data.topicJson == undefined){
          let nowdate = new Date();
          let dateLong = nowdate.getTime();
          todoList = [{'topicSetting':{'willAnswer':'0','optionReNo':'0','ezQuABC':'1','optionArray':'1'},'dataSort':dateLong,'type':'0',quesType:'sinselect','title':'单选题','titleInfo':'单选题','options':[{'optionsContent':'选项','optionSetting':{"optionBlank":"0","optionBlankWill":"0","optionScore":"0","optionImg":[]}}]}];
        }else{
          let list = JSON.parse(content.data.topicJson).list;
          todoList = list;
        }
        t.setState({
          todoList : todoList
        },()=>{
          t.refs.ques.setTodo(t.state.todoList);
        })
      }
      // alert(JSON.stringify(content));
      // alert(JSON.stringify(content.data.topicJson));
      // alert(content.data.topicJson);
      // alert(JSON.parse(content.data.topicJson).list);
      // alert(JSON.stringify(JSON.parse(content.data.topicJson).list));
    }).catch();
  }

  getPerson(value,type){
    if(value!="" && value!=null){
      if(type=='answer'){
        this.setState({
          answerScopeList:value
        });
      }else if(type=='ques'){
        this.setState({
          quesScopeList:value
        });
      }
    }
  }
    //提交表单
    submitLog(){
      let t = this;
     
    //   //名称
    //   let name = t.state.title;
    //   if(name ==''){
    //     Toast.show({
    //       type: 'error',
    //       content: '问卷名称不能为空'
    //     });
    //     return;
    //   }else if(!this.validateText(name, '问卷名称')){
    //   return;
    // }else if(name.length > 20){
    //   Toast.show({
    //     type: 'error',
    //     content: '问卷名称不能超过20个字符',
    //     onHide: function () {}
    //   });
    //   return;
    // }
    //
    //
    //   //问卷类型
    //   let typeSelect = t.state.typeSelect;
    //   let quesType = '';
    //   if(typeof(typeSelect) != 'undefined' && typeSelect != null ){
    //     quesType = typeSelect.value;
    //   }else{
    //     Toast.show({
    //       type: 'error',
    //       content: '问卷类型不能为空'
    //     });
    //     return;
    //   }
    //
    //   //开始时间
    //   let date1 = t.state.startDate;
    //   let startDate = '';
    //   // if(typeof(date1) == 'undefined'){
    //   if(date1 == null){
    //     Toast.show({
    //       type: 'error',
    //       content: '开始时间不能为空'
    //     });
    //     return;
    //   }else{
    //     let time1 = new Date(date1.value);
    //     startDate = this.formatDate (time1);
    //   }
    //
    //   //结束时间
    //   let date2 = t.state.endDate;
    //   let endDate = '';
    //   // if(typeof(date2) == 'undefined'){
    //   if(date2 == null){
    //     Toast.show({
    //       type: 'error',
    //       content: '结束时间不能为空'
    //     });
    //     return;
    //   }else{
    //     let time2 = new Date(date2.value);
    //     endDate = this.formatDate(time2);
    //   }
    //
    //   let answerScopeList = JSON.stringify(this.state.answerScopeList);
    //   let quesScopeList = JSON.stringify(this.state.quesScopeList);
    //   if(this.state.quesScopeList==null || this.state.quesScopeList.length==0){
    //     Toast.show({
    //       type: 'error',
    //       content: '适用范围不能为空'
    //     });
    //     return;
    //   }
    //   if(this.state.answerScopeList==null || this.state.answerScopeList.length==0){
    //     Toast.show({
    //       type: 'error',
    //       content: '答卷查看范围不能为空'
    //     });
    //     return;
    //   }
    //
    //   //描述
    //   let description = t.state.titleDescription;
    //   if(description.length > 200){
    //     Toast.show({
    //       type: 'error',
    //       content: '问卷描述不能超过200个字符',
    //       onHide: function () {}
    //     });
    //     return;
    // }
    // if(description!=''){
    //   if(isEmojiCharacter(description)){
    //     Toast.show({
    //     type: 'error',
    //     content: '问卷描述不能输入表情',
    //     onHide: function () {}
    //  });
    //   return;
    //   }
    // }
      //问题
      let list = t.state.todoList;
      let titlename = '';
      for(let i=0;i<list.length;i++){
        titlename = list[i].titleInfo;
        if(list[i].titleInfo!=null&&list[i].titleInfo!=''){
              if(isEmojiCharacter(list[i].titleInfo)){
                Toast.show({
                  type: 'error',
                  content: '题目不能输入表情',
                  onHide: function () {}
                });
                return;
              }
        }
        if(list[i].quesType=='sinselect'){
          let option = list[i].options;
          for(let j=0;j<option.length;j++){
            if(option[j].optionsContent==''){
              Toast.show({
                type: 'error',
                content: '单选题有选项名称没有填写',
                onHide: function () {}
             });
              return;
            }if(option[j].optionsContent.trim()==''){
              Toast.show({
                type: 'error',
                content: '单选题选项不能只输入空格',
                onHide: function () {}
             });
              return;
            }
            if(option[j].optionsContent!=null&&option[j].optionsContent!=''){
              if(isEmojiCharacter(option[j].optionsContent)){
                Toast.show({
                  type: 'error',
                  content: '单选题选项不能输入表情',
                  onHide: function () {}
                });
                return;
              }
            }
          }
        }
        if(list[i].quesType=='multiselect'){
          let option = list[i].options;
          for(let j=0;j<option.length;j++){
            if(option[j].optionsContent==''){
              Toast.show({
                type: 'error',
                content: '多选题有选项名称没有填写',
                onHide: function () {}
              });
              return;
            }if(option[j].optionsContent.trim()==''){
              Toast.show({
                type: 'error',
                content: '多选题选项不能只输入空格',
                onHide: function () {}
              });
              return;
            }
            if(option[j].optionsContent!=null&&option[j].optionsContent!=''){
              if(isEmojiCharacter(option[j].optionsContent)){
                Toast.show({
                  type: 'error',
                  content: '多选题选项不能输入表情',
                  onHide: function () {}
                });
                return;
              }
            }
          }
        }
      }
      var param = {
          // name:name,
          // answerScopeList:answerScopeList,
          // quesScopeList:quesScopeList,
          // quesType:quesType,
          // startDate:startDate,
          // endDate:endDate,
          // description:description,
          list:list
        };

      //id
      // let id = t.state.dataId;
      // var param = {
      //   id:id,
      //   logTime:logTime,
      //   projectId:projectId,
      //   todayArrange:todayArrange,
      //   content:content
      // };
      DB.QuesModuleAPI.saveDesign({
      	entity:JSON.stringify(param),
        quesId : t.state.id
      }) 
      .then((content) => {
        Toast.show({
          type: 'success',
            content: '保存成功',
         });
        history.go(-1);
      }).catch((error) => {
        if(typeof(error.errorMsg) == 'undefined'){
          Toast.show({
            type: 'error',
            content: '提交出错'
          });
        }else{
          Toast.show({
            type: 'error',
            content: error.errorMsg
          });
        }
      });
    }

    handleChangeList(rows){
      this.setState({
        todoList:rows,
      })
    }

    cancel(){
      history.go(-1);
    }

    handleChangePic(value){
    }
    showSlot(id) {
        this[id].show();
      }

    render() {
       	const t = this;
         const angleIconProps = { fill: 'rgba(31,56,88,0.40)', width: 20, height: 20 };
       	return (
	       		<div  className="approval-details t-PB68" >
		             <div className="page-add">
                  <Ques ref="ques"
                      onAdd={this.handleChangeList.bind(this)}
                      onDel={this.handleChangeList.bind(this)}
                      todo={this.state.todoList}
                  />
		      	</div>
            
            <div >
                <Button.Group >
                  <Button type="primary" display="inline" onClick={t.submitLog.bind(t)}>保存</Button>
                  <Button type="secondary" display="inline" onClick={t.cancel.bind(t)}>取消</Button>  
              </Button.Group>
            </div>

	        </div>
       	)
       }
}
